<template>
  <div>
    <a-card class="cardBox difficulty">
      <div class="tit" slot="title">痛点与难点</div>
      <div class="content">
        <div class="diffL">
          <div class="tits">四个需求</div>
          <div class="itemXq xq1" @click="demandClick(1)">
            <p>影视拍摄标准不统一</p>
            <p>信息化程度低</p>
            <a-icon class="icoRight" type="double-right" />
          </div>
          <div class="itemXq xq2" @click="demandClick(2)">
            <p>产业配套供应不畅通</p>
            <p>上下游产业链延伸能力不足</p>
            <a-icon class="icoRight" type="double-right" />
          </div>
          <div class="itemXq xq3" @click="demandClick(3)">
            <p style="padding-top:9px">版权交易机制不完善</p>
            <p>后期制作成本高"</p>
            <a-icon class="icoRight" type="double-right" />
          </div>
          <div class="itemXq xq4" @click="demandClick(4)">
            <p>产业数据积累不够</p>
            <p>风险和机遇预判不精准"</p>
            <a-icon class="icoRight" type="double-right" />
          </div>
        </div>
        <div class="diffR">
          <div class="tits">
            <span class="s1">八类问题</span>
            <span class="s2">36个痛点</span>
            <span class="s3">八大应用</span>
          </div>
          <ul>
            <li>
              <div class="item1">
                <p>1.影视工业化程度低，没有标准的拍摄业务流程，剧组成本往往无法有效控制</p>
                <p>2.演职人员流动性大，政府管理难、横漂基本权益维护难</p>
              </div>
              <div class="item2">···</div>
              <div class="item3">
                <p>剧组综合服务系统（云勘景）</p>
                <p>人才综合服务系统（横影通）</p>
              </div>
            </li>
            <li>
              <div class="item1">
                <p>3.供应链缺乏交易平台，服化道采购渠道单一，配套供需匹配不精准</p>
                <p>4.影视作品生命周期短，提前部署IP转化意识弱，衍生品开发渠道有待拓展</p>
              </div>
              <div class="item2">···</div>
              <div class="item3">
                <p>服化道供应链系统</p>
                <p>衍生品交易系统</p>
              </div>
            </li>
            <li>
              <div class="item1" style=" min-height: 63px">
                <p>5.影视版权交易缺乏确权认定平台，版权侵权发现难、保护成本高</p>
                <p>6.传统影视拍摄和剪辑环节完全割裂，视频传输慢，后期制作硬件更新成本高，现场补拍时间成本高</p>
              </div>
              <div class="item2">···</div>
              <div class="item3">
                <p>版权区块链交易系统</p>
                <p>影视制作云</p>
              </div>
            </li>
            <li>
              <div class="item1">
                <p>7.产业数据没有沉淀积累，分析决策缺乏数据支撑，无法精准掌控产业运行态势</p>
                <p>8.缺乏企业画像，无法为企业提供特色、高效服务</p>
              </div>
              <div class="item2">···</div>
              <div class="item3">
                <p>决策分析系统</p>
                <p>企业服务管理系统（政企通）</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
    </a-card>
    <a-modal v-model="demandVisble" width="88%" :footer="null" :centered="true" title="痛点与难点">
      <div class="modalContent">
        <img v-if="demandIndex === 1" src="@/assets/img/xq1.png" class="filesImg">
        <img v-if="demandIndex === 2" src="@/assets/img/xq2.png" class="filesImg">
        <img v-if="demandIndex === 3" src="@/assets/img/xq3.png" class="filesImg">
        <img v-if="demandIndex === 4" src="@/assets/img/xq4.png" class="filesImg">
      </div>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'HytBoard3',
    data () {
      return {
        demandIndex: null,
        demandVisble: false
      }
    },
    mounted () {

    },
    watch: {
      demandVisble (val) {
        if (!val) {
          this.demandIndex = null
        }
      }
    },
    methods: {
      demandClick (i) {
        this.demandVisble = true
        this.demandIndex = i
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .filesImg {max-width: 100%; display: block; margin: auto}
  .modalContent {
    height: auto; padding-right: 10px; overflow-x: hidden; overflow-y: auto;
    .biaoti {
      background: #f8f8f8;
      margin-bottom: 16px;
      font-size: 15px;
      padding: 8px 15px; position: relative;
    }

    .biaoti::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #1890ff
    }
  }
  .difficulty {
    .diffL { width: 230px; float: left;
      .tits { font-size: 18px; font-weight: bold; margin-bottom: 20px }
      .itemXq { padding: 8px 12px; border: 1px solid #ccc; margin-bottom: 10px; border-radius: 6px;
        position: relative; cursor: pointer; font-size: 15px;
        .icoRight { font-size: 30px;
          position: absolute; right: 5px; top: 50%; margin-top: -15px; color: rgba(0,0,0, .3);}
        p { margin: 0}
      }
      .xq1{ height: 58px;}
      .xq3{ height: 82px;}
    }
    .diffR { width: calc( 100% - 270px ); float: right;
      .tits {margin-bottom: 20px}
      .tits span {font-size: 18px; font-weight: bold; display: inline-block;}
      .tits .s1{ width: 60% }
      .tits .s2{ width: 120px }
      .tits .s3{ width: calc( 40% - 125px ) }
      li{ display: flex;background: -webkit-gradient(linear, 0 0, 0 100%, from(#53a3ff), to(#6bd4fe)); color: #fff;
        padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 15px;
        p{margin: 0}
        div { display: inline-block;}
        .item1{width: 62%; padding-right: 10px;}
        .item2{width: 120px;font-size: 20px}
        .item3{width: calc( 38% - 125px )}
      }
    }
    .clear { clear: both}
  }
</style>
